<template>
  <div class="myform">
    <el-form
      ref="form"
      :rules="interviewRules"
      :model="interviewForm"
      label-width="100px"
    >
      <div class="company">
        <el-row type="flex" class="row-bg">
          <el-col :span="6"
            ><div class="grid-content bg-purple"><h2>公司信息</h2></div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="公司名称：" prop="name">
                <span v-text="interviewForm.name"></span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" :offset="1"
            ><div class="grid-content bg-purple">
              <el-form-item label="公司类型：" prop="companyType">
                <span v-text="interviewForm.companyType"></span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5" :offset="1"
            ><div class="grid-content bg-purple">
              <el-form-item
                label="公司位置："
                prop="address"
                label-width="100px"
              >
                <el-input
                  type="textarea"
                  v-text="interviewForm.address"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
      </div>

      <el-row type="flex" class="row-bg">
        <el-col :span="6"
          ><div class="grid-content bg-purple"><h2>面试信息</h2></div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="面试途径："
              prop="interviewChannel"
              label-width="100px"
            >
              <el-input v-text="interviewForm.interviewChannel"></el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="6" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item
              label="面试平台："
              prop="interviewPlatform"
              label-width="100px"
            >
              <el-input v-text="interviewForm.interviewPlatform"></el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="5" :offset="1"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="岗位类型："
              prop="postType"
              label-width="100px"
            >
              <el-input v-text="interviewForm.postType"></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="面试岗位："
              prop="postName"
              label-width="100px"
            >
              <el-input v-text="interviewForm.postName"></el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="6" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item
              label="面试时间："
              prop="interviewTime"
              label-width="100px"
            >
              <el-date-picker
                type="datetime"
                v-text="interviewForm.interviewTime"
                format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item></div
        ></el-col>

        <el-col :span="5" :offset="1"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="岗位设定薪资："
              prop="postSalary"
              label-width="110px"
            >
              <el-input v-text="interviewForm.postSalary"></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="岗位要求补充："
              prop="postNeed"
              label-width="110px"
            >
              <el-input
                type="textarea"
                v-text="interviewForm.postNeed"
              ></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-col :span="6"
          ><div class="grid-content bg-purple"><h2>面试结果</h2></div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="面试结果：" prop="result" label-width="100px">
              <el-select v-text="interviewForm.result">
                <el-option label="通过" value="通过"></el-option>
                <el-option label="未通过" value="未通过"></el-option>
                <el-option label="待定" value="待定"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="是否一面：" prop="isFrist" label-width="120px">
              <el-select v-text="interviewForm.isFrist">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="7" :offset="1"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="是否进入下轮："
              prop="isNext"
              label-width="110px"
            >
              <el-select v-text="interviewForm.isNext">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="是否录用：" prop="isLy" label-width="100px">
              <el-select v-text="interviewForm.isLy">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="5" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item
              label="第几次面试："
              prop="interviewTimes"
              label-width="100px"
            >
              <el-input v-text="interviewForm.interviewTimes"></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="结果描述："
              prop="resultDesc"
              label-width="100px"
            >
              <el-input
                type="textarea"
                v-text="interviewForm.resultDesc"
              ></el-input>
            </el-form-item></div
        ></el-col>

        <el-col :span="6" :offset="1">
          <div class="grid-content bg-purple">
            <el-form-item label="面试感想：" prop="feeling" label-width="120px">
              <el-input
                type="textarea"
                v-text="interviewForm.feeling"
              ></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-col :span="6"
          ><div class="grid-content bg-purple"><h2>面试问题</h2></div></el-col
        >
      </el-row>
      <el-row type="flex" class="row-bg">
        <el-col :span="20">
          <p v-html="interviewForm.remark"></p>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="1" :offset="21">
        <div class="grid-content bg-purple">
          <el-button
            type="primary"
            @click="onSubmit('form')"
            icon="el-icon-circle-close"
            >返回</el-button
          >
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script>
import { createInterview, getIterviewById } from "@/api/interview";
export default {
  data() {
    return {
      interviewForm: {
        a1: null,
        a2: null,
        a3: null,
        a4: null,
        a5: null,
        a6: null,
        address: null,
        companyStaff: null,
        companyStaffPost: null,
        companyStaffQq: null,
        companyStaffTell: null,
        companyStaffWx: null,
        companyType: null,
        feeling: null,
        infoId: null,
        interviewChannel: null,
        interviewPlatform: null,
        interviewTime: null,
        interviewTimes: null,
        isFrist: null,
        isLy: null,
        isNext: null,
        name: null,
        postName: null,
        postNeed: null,
        postSalary: null,
        postType: null,
        q1: null,
        q2: null,
        q3: null,
        q4: null,
        q5: null,
        q6: null,
        result: null,
        resultDesc: null
      },
      form: {
        name: ""
      },
      options: [
        {
          value: "是",
          label: "是"
        },
        {
          value: "否",
          label: "否"
        }
      ],
      value: "",
      interviewRules: {
        name: [{ required: true, trigger: "blur", message: "请输入公司名" }],
        companyType: [
          { required: true, trigger: "blur", message: "请输入公司类型" }
        ]
      }
    };
  },
  methods: {
    handleClick(tab, event) {},

    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          createInterview(this.interviewForm).then(response => {});
          this.$router.push("/interview/index");
        } else {
          this.$message.error("表单信息不能为空");
        }
      });
    },

    getInterviewById(id) {
      getIterviewById(id).then(response => {
        if (response.code == 200) {
          this.interviewForm = response.data;
        } else {
          this.$message({
            message: response.msg,
            type: "error",
            duration: 1000
          });
        }
      });
    }
  },
  created() {
    const id = this.$route.query.id;
    if (id != null) {
      this.getInterviewById(id);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.myform {
  margin-left: 10px;
  width: 95%;
}
</style>
